<style>
    .panel-body .form-control {
        display: inline-block;
        width: calc(100% - 100px);
    }

    .panel-body .form-label {
        display: inline-block;
        width: 80px;
    }

    .panel-body .input-container {
        margin-bottom: 10px;
    }
</style>
<div class="main">
    <!-- MAIN CONTENT -->
    <div class="main-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">新增轮播图</h3>
                        </div>
                        <form action="/admin/banner/add?_csrf=<%= csrf %>" method="POST" class="panel-body">
                            <div class="input-container">
                                <span class="form-label">banner图：</span>
                                <button type="button" id="file-label" class="btn btn-primary btn-sm">选择图片</button>
                                <input style="display: none" type="file" id="file">
                                <input style="display: none" name="file" id="base64File">
                                <div style="margin-top: 10px;">
                                    <img id="pre-img" style="width: 800px;display: none" />
                                </div>
                            </div>
                            <div class="input-container">
                                <span class="form-label">链接：</span>
                                <input class="form-control" placeholder="输入资讯id" name="link">
                            </div>
                            <div class="input-container">
                                <span class="form-label">权重：</span>
                                <input class="form-control" placeholder="输入数字，越大排名越靠前" name="weight">
                            </div>
                            <div class="input-container">
                                <button type="submit" class="btn btn-primary btn-block">提交</button>
                            </div>
                        </form>
                    </div>
                    <!-- TABLE STRIPED -->
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">当前轮播图</h3>
                        </div>
                        <div class="panel-body">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>banner图</th>
                                        <th>链接地址</th>
                                        <th>权重</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% for(let i = 0; i < bannerData.length; i++){ %>
                                        <tr>
                                            <td>
                                                <%= i+1%>
                                            </td>
                                            <td>
                                                <img src="<%= bannerData[i].url%>" style="height: 200px;" alt="">
                                            </td>
                                            <td>
                                                <%= bannerData[i].link%>
                                            </td>
                                            <td>
                                                <%= bannerData[i].weight%>
                                            </td>
                                            <td>
                                                <a href="javascript:void(0)"
                                                    onclick="delBanner('<%= bannerData[i]._id%>')"
                                                >删除</a>
                                            </td>
                                        </tr>
                                    <% } %>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- END TABLE STRIPED -->

                </div>

            </div>

        </div>
    </div>
    <!-- END MAIN CONTENT -->
</div>
<!-- END MAIN -->
<div class="clearfix"></div>
<script>
    function delBanner(id){
        $.post('/admin/delBanner',{id:id},function(data){
            history.go(0);
        });
    }
    $(function () {
        var file;
        function previewFile() {
            var preview = $('#pre-img');
            var reader = new FileReader();

            reader.onloadend = function () {
                preview.attr('src', reader.result).css('display', 'inline');
                $('#base64File').val(reader.result);
            }

            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.attr('src', '').css('display', 'none');
            }
        }
        $('#file-label').on('click', function () {
            $('#file').trigger('click');
        })
        $('#file').on('change', function (e) {
            if (!e.target.files[0]) {
                return;
            }
            file = e.target.files[0];
            previewFile();
        })
    });
</script>